<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <div class="search-input">时间搜索</div>
                    <el-date-picker v-model="search.time_range" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :size="size" />
                <div class="search-input">合同号/批次号</div>
                <el-input v-model="search.keyword" placeholder="请输入合同号/批次号" clearable @change="handleKeyDown" />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" stripe remoteSort remoteFilter border :params="query" show-summary>
                <el-table-column type="selection" width="50"></el-table-column>
                <!-- <el-table-column fixed type="index" align="center" width="50"></el-table-column> -->
                <el-table-column fixed label="发织合同号" align="center" width="160">
                    <template #default="{row}">
                        <div>{{row.contract_no}}</div>
                        <div>{{row.create_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="商品信息" fixed prop="goods" align="center" width="300">
                        <template #default="{row}">
                            <div class="shopInfo" v-if="row.goods">
                                <el-image class="img" :src="row.goods.goods_image" :preview-src-list="row.goods.goods_image_item" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                                <div class="right">
                                    <div>工厂货号：{{row.contract && row.contract.factory_number}}</div>
                                    <div>批次号：{{row.contract && row.contract.batch_number}}</div>
                                    <div>SKC：{{row.contract && row.contract.skc}}</div>
                                    <div>商品品牌：{{row.contract && row.contract.brand_name}}</div>
                                    <div>客户：{{row.contract.custom_name}}</div>
                                    <div>颜色：{{row.goods && row.goods.colour}}</div>
                                    <div v-if="row.sizeCate">商品类别：{{row.sizeCate && row.sizeCate.title}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                <el-table-column fixed label="承制人" prop="referred_as" align="center"></el-table-column>
                <el-table-column fixed label="承制数量" prop="total_count" align="center">
                    <template #default="{row}">
                        <div>{{row.contract && row.contract.total_count}}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="所需重量" prop="needed_total_weight" align="center"></el-table-column>
                <el-table-column fixed label="待发重量" prop="total_no_received" align="center"></el-table-column>
                <el-table-column fixed label="已发重量" prop="total_weight" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="110">
                    <template #default="scope">
                        <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)" >领毛详情</el-button>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <save v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></save>
</template>
<script>
import save from './save';

export default {
  components: { save },
	name: 'user',
	data() {
		return {
            dialog:{
                save:false,
            },
			groupFilterText: '',
			group: [],
			apiObj: this.$API.produce.receiveOrder,
			selection: [],
			search: {
				time_range: null,
				keyword: null,
			},
			//所需数据选项
            settlementList: [],
            query: {
                is_local:1,
			},
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val);
		}
	},
	mounted() {},
	methods: {
		//查看
		table_show(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('show').setData(row)
			})
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        handleKeyDown() {
            this.upsearch()
        },
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
</style>
